<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>房型管理</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="Thu, 19 Nov 1900 08:52:00 GMT">
        <link rel="shortcut icon" href="images/icons/favicon.ico" th:href="@{/images/icons/favicon.ico}">
        <link rel="apple-touch-icon" href="images/icons/favicon.png" th:href="@{/images/icons/favicon.png}">
        <link rel="apple-touch-icon" sizes="72x72" href="images/icons/favicon-72x72.png" th:href="@{/images/icons/favicon-72x72.png}">
        <link rel="apple-touch-icon" sizes="114x114" href="images/icons/favicon-114x114.png" th:href="@{/images/icons/favicon-114x114.png}">
        <!--Loading bootstrap css-->
        <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,700">
        <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Oswald:400,700,300">
        <link type="text/css" rel="stylesheet" href="../static/vendors/jquery-ui-1.10.4.custom/css/ui-lightness/jquery-ui-1.10.4.custom.min.css" th:href="@{/vendors/jquery-ui-1.10.4.custom/css/ui-lightness/jquery-ui-1.10.4.custom.min.css}">
        <link type="text/css" rel="stylesheet" href="../static/vendors/font-awesome/css/font-awesome.min.css" th:href="@{/vendors/font-awesome/css/font-awesome.min.css}">
        <link type="text/css" rel="stylesheet" href="../static/vendors/bootstrap/css/bootstrap.min.css" th:href="@{/vendors/bootstrap/css/bootstrap.min.css}">
        <!--LOADING STYLESHEET FOR PAGE-->
        <link type="text/css" rel="stylesheet" href="../static/vendors/intro.js/introjs.css" th:href="@{/vendors/intro.js/introjs.css}">
        <link type="text/css" rel="stylesheet" href="../static/vendors/calendar/zabuto_calendar.min.css" th:href="@{/vendors/calendar/zabuto_calendar.min.css}">
        <link type="text/css" rel="stylesheet" href="../static/vendors/sco.message/sco.message.css" th:href="@{/vendors/sco.message/sco.message.css}">
        <!--Loading style vendors-->
        <link type="text/css" rel="stylesheet" href="../static/vendors/animate.css/animate.css" th:href="@{/vendors/animate.css/animate.css}">
        <link type="text/css" rel="stylesheet" href="../static/vendors/jquery-pace/pace.css" th:href="@{/vendors/jquery-pace/pace.css}">
        <link type="text/css" rel="stylesheet" href="../static/vendors/iCheck/skins/all.css" th:href="@{/vendors/iCheck/skins/all.css}">
        <link type="text/css" rel="stylesheet" href="../static/vendors/jquery-notific8/jquery.notific8.min.css" th:href="@{/vendors/jquery-notific8/jquery.notific8.min.css}">
        <link type="text/css" rel="stylesheet" href="../static/vendors/bootstrap-daterangepicker/daterangepicker-bs3.css" th:href="@{/vendors/bootstrap-daterangepicker/daterangepicker-bs3.css}">
        <!--Loading style-->
        <link type="text/css" rel="stylesheet" href="../static/css/themes/style1/orange-blue.css" class="default-style" th:href="@{/css/themes/style1/orange-blue.css}">
        <link type="text/css" rel="stylesheet" href="../static/css/themes/style1/orange-blue.css" id="theme-change" class="style-change color-change" th:href="@{/css/themes/style1/orange-blue.css}">
        <!--  <link type="text/css" rel="stylesheet" href="css/style-responsive.css">-->
        <!--新增加的css样式-->
        <link type="text/css" rel="stylesheet" href="../static/css/addcss.css" th:href="@{/css/addcss.css}">
        <script src="/static/js/jquery-2.1.1.min.js" th:src="@{/js/jquery-2.1.1.min.js}"></script>
        <style>
                /*  弹框样式 */
            body .dialog{
                font-size:14px}
            .dialog{
                width:360px;border:solid 5px #666;position:absolute;display:none;z-index:101}
            .dialog .title{background-color:#33485C;padding:10px;color:#fff;font-weight:bold}
            .dialog .title img{float:right;margin-top: -8px;margin-right: -10px}
            .dialog .content{background-color:#fff;padding:25px;height:80px}
            .dialog .content img{float:left}
            .dialog .content span{float:left;padding-top:10px;padding-left:10px}
            .dialog .bottom{text-align:right;padding:10px 10px 10px 0px;background-color:#eee}
            .mask {width:100%;height:100%; background-color:rgba(0,0,0,0.4);position:absolute;
                top:0px;left:0px;display:none;z-index:100}
            #thtr th {
                text-align: center;
            }
            /*模态框样式*/
             #myModal .modal-footer{ width: 450px;}
             #myModal .modal-content{width: 450px;}
             #myModal .modal-body{width: 650px;}
        </style>
    </head>
    <body class=" ">
        <div>
            <!--BEGIN BACK TO TOP-->
            <a id="totop" href="#"><i class="fa fa-angle-up"></i></a>
            <!-- 引用头部 -->
            <div th:replace="common/top::topFragment"></div>
            <!--END TOPBAR-->
            <div id="wrapper">
                <!-- 引用左菜单导航栏 -->
                <div th:replace="common/leftToolBar::leftToolbar"></div>
                <!--END CHAT FORM-->
                <!--BEGIN PAGE WRAPPER-->
                <div id="page-wrapper">
                    <!-- 引用工具条 -->
                    <div th:replace="common/toolBar::toolBar"></div>
                    <!--右侧区内容的编写 -->
                    <div class="page-content">

                        <div class="" style="margin-bottom: 15px;text-align: center">
                            <!-- 查询 --><!--action="/roomType/toRoomType?pageNum=1"-->
                            <form id="myForm" class="form-inline"  th:action="@{/roomType/toRoomType(pageNum=1)}" method="post">
                                <!--隐藏的内容-->
                                <button type="button" class="btn btn-info btn_addRoomType"  th:value="添加类型" onclick="openModal()">添加类型</button>
                                <div class="form-group">
                                    <label class="control-label">房间类型名称：</label>
                                    <input  class="form-control" id="roomTypeName" name="typeName" th:value="${roomType.typeName}"
                                           placeholder="请输入类型名称"/>
                                </div>
                                <div class="form-group">
                                    <label class="control-label">房间类型状态：</label>
                                    <select id="status"  th:name="status" th:value="roomType.status" class="form-control input-sm">
                                        <option value="">--请选择--</option>
                                        <option th:selected="${roomType.status eq 0}"  value="0">房间已满</option>
                                        <option th:selected="${roomType.status eq 1}"   value="1">可预订可入住</option>
                                        <option th:selected="${roomType.status eq 2}"  value="2">无房间</option>
                                    </select>
                                </div>
                                <button type="submit" class="btn btn btn-success">查询</button>
                                <button type="button" class="btn btn btn-warning">重置</button>
                            </form>
                            <!-- 表格 -->
                            <table class="table table-bordered" style="margin-top: 20px">
                                <tr id="thtr">
                                    <th>房型编号</th>
                                    <th>房型名称</th>
                                    <th>押金</th>
                                    <th>床位数</th>
                                    <th>房间数</th>
                                    <th>可用</th>
                                    <th>已预订</th>
                                    <th>已入住</th>
                                    <th>房型状态</th>
                                    <th>操作</th>
                                </tr>
                                <tr th:each="roomType : ${pageInfo.getList()}">
                                    <td th:text="${roomType.roomTypeId}"></td>
                                    <td th:text="${roomType.typeName}"></td>
                                    <td th:text="${roomType.price}"></td>
                                    <td th:text="${roomType.bedNum}"></td>
                                    <td th:text="${roomType.roomNum}"></td>
                                    <td th:text="${roomType.usable}"></td>
                                    <td th:text="${roomType.reserved}"></td>
                                    <td th:text="${roomType.checkIn}"></td><td>
                                        <span th:if="${roomType.status==0}">房间满</span>
                                        <span th:if="${roomType.status==1}">可预订可入住</span>
                                        <span th:if="${roomType.status==2}">无房间</span>
                                    </td>
                                    <td>
                                        <button type="button" class="btn btn-default btn-xs active btn_updateRoomType" onclick="openModal()">修改</button>
                                        <button type="button" class="btn btn-xs btn-primary active deleteBtn">删除</button>
                                    </td>
                                </tr>
                            </table>

                        <!-- 功能操作内容 -->
                    </div>
                        <div>
                            <ul class="pager">
                                <li>
                                    <a th:href="@{/roomType/toRoomType(pageNum=1,typeName=${roomType.typeName},status=${roomType.status})}" >首页</a>
                                </li>
                                <li>
                                    <a th:href="@{/roomType/toRoomType(pageNum=${pageInfo.isHasPreviousPage()}?${pageInfo.getPrePage()}:1,typeName=${roomType.typeName},status=${roomType.status})}">&laquo;</a>
                                </li>
                                <li>第 [[${pageInfo.pageNum}]] 页</li>
                                <li>
                                    <a th:href="@{/roomType/toRoomType(pageNum=${pageInfo.isHasNextPage()}?${pageInfo.getNextPage()}:${pageInfo.pages},typeName=${roomType.typeName},status=${roomType.status})}">&raquo;</a>
                                </li>
                                <li>
                                    <a th:href="@{/roomType/toRoomType(pageNum=${pageInfo.pages},typeName=${roomType.typeName},status=${roomType.status})}">尾页</a>
                                </li>
                                <li>&nbsp;&nbsp;&nbsp;总页数 [[${pageInfo.pages}]] 页</li>
                                <li>&nbsp;&nbsp;&nbsp;总记录数 [[${pageInfo.total}]] 条</li>
                            </ul>
                        </div>

                    <!--END CONTENT-->
                </div>
                    <script type="text/javascript">
                        $(function () {
                            //重置信息
                            $(".btn-warning").click(function () {
                                location.href="/roomType/toRoomType?pageNum=1";
                            })

                            var roomTypeId=null;    //id ：要删除的值
                            var typeName = null;        //房间类型名称
                            $(".deleteBtn").click(function() { //删除按钮点击事件
                                roomTypeId = $(this).parent().siblings().eq(0).html();//获得id
                                typeName = $(this).parent().siblings().eq(1).html();      //获得名字
                                appendContent(typeName);    //调用弹框方法
                                $(".mask").show(); //显示背景色
                                showDialog(); //设置提示对话框的Top与Left
                                $(".dialog").show(); //显示提示对话框
                            })

                            //拼接删除.content的内容
                            function appendContent(name) {
                                $(".content").empty();
                                var html = "<img src='/images/room/roomTanC/delete.png' alt='删除'/>"
                                html += "您确定要删除:"
                                html += "<font color='red' style='font-weight: bold'>";
                                html += name;
                                html += "</font>这条房间类型数据吗？"
                                $(".content").append(html);
                            }
                            /*
                            *根据当前页面与滚动条位置，设置提示对话框的Top与Left
                            */
                            function showDialog() {
                                var objW = $(window); //当前窗口
                                var objC = $(".dialog"); //对话框
                                var brsW = objW.width();
                                var brsH = objW.height();
                                var sclL = objW.scrollLeft();
                                var sclT = objW.scrollTop();
                                var curW = objC.width();
                                var curH = objC.height();
                                //计算对话框居中时的左边距
                                var left = sclL + (brsW - curW) / 2;
                                //计算对话框居中时的上边距
                                var top = sclT + (brsH - curH) / 2;
                                //设置对话框在页面中的位置
                                objC.css({ "left": left, "top": top });
                            }
                            //页面窗口大小改变事件
                            $(window).resize(function() {
                                if (!$(".dialog").is(":visible")) {
                                    return;
                                }
                                showDialog(); //设置提示对话框的Top与Left
                            });

                             $(".title img").click(function() { //关闭图片点击事件
                                 $(".dialog").hide();
                                 $(".mask").hide();
                             })

                            $("#Button3").click(function() {//取消按钮点击事件
                                $(".dialog").hide();
                                $(".mask").hide();
                            })

                            $("#Button2").click(function() {//确定按钮点击事件
                                $(".dialog").hide();
                                $(".mask").hide();

                                ajax_deleteRoomType(roomTypeId);

                            })
                            //在这里执行删除命令
                            function ajax_deleteRoomType(roomTypeId){
                                var url = "/roomType/deleteRoomType";
                                var params  = "roomTypeId="+roomTypeId;
                                $.ajax({
                                    async:false,
                                    url: url,
                                    data:params,
                                    type: "POST",
                                    dataType: "json",
                                    success: function(data){
                                        alert(data.success);//弹窗信息
                                        if (data.success=="删除成功"){
                                            var message = $("#myForm").serialize()
                                            location.href="/roomType/toRoomType?pageNum=1&"+message;//刷新列表
                                        }
                                    },error:function(){
                                        alert("请联系管理员");
                                    }
                                });
                            }
                        })

                    </script>

                    </div>

                <!--表单验证的样式--->
                <style>
                    .default_check{
                        float: right;
                        padding: 15px;
                        color: red;
                        margin-top: -33px;
                        margin-right: -40px;
                    }
                    .add_error{
                        background: url('../images/error.png') no-repeat left center;
                    }
                    .tip{
                        background: url('../images/tip.png') no-repeat left center;
                    }
                    .valid{
                        background: url('../images/valid.png') no-repeat left center;
                    }
                </style>
                <!--  修改 模态框（Modal）-->
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true" onclick="resultInfo()">×
                                </button>
                                <h4 class="modal-title" id="myModalLabel"> 添加房间类型 </h4>
                            </div>
                            <div class="modal-body">
                                <form  class="form-horizontal" method="post">
                                    <!--隐藏的内容-->
                                     <input type="hidden" class="form-control" id="u_roomtypeId" name="roomTypeId">

                                    <input type="hidden" class="form-control" id="u_reserved" name="reserved">
                                    <input type="hidden" class="form-control" id="u_checkIn" name="checkIn">
                                    <input type="hidden" class="form-control" id="u_status" name="status">


                                    <div class="form-group">
                                        <label  class="col-sm-2 control-label">房型名称：</label>
                                        <div class="col-sm-5">
                                            <input type="text" class="form-control" id="u_typeName" name="typeName" th:value="${roomType.typeName}"><span id="u_typeName_check" class="default_check tip"></span>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label  class="col-sm-2 control-label">押金：</label>
                                        <div class="col-sm-5">
                                            <input type="text" class="form-control" id="u_price" name="price" th:value="${roomType.price}"><span id="u_price_check" class="default_check tip"></span>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label  class="col-sm-2 control-label">床位数：</label>
                                        <div class="col-sm-5">
                                            <input type="text" class="form-control" id="u_bedNum" name="bedNum" th:value="${roomType.bedNum}"><span id="u_bedNum_check" class="default_check tip"></span>
                                        </div>
                                    </div>
                                    <!---隐藏的值-->
                                    <input type="hidden" id="oldTypeName">
                                </form>

                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" onclick="resultInfo()">
                                    重置
                                </button>
                                <button type="button" class="btn btn-success btn_update_add">
                                    添加
                                </button>
                            </div>
                        </div>
                    </div> <!--/.modal-dialog&ndash-->
                </div> <!--/.modal&ndash-->
                <script type="text/javascript">

                    /**
                     * 添加 修改通过roomTypeInfo
                     * @param url
                     * @param data
                     * @param shuchu
                     */
                    function btn_update_add(url,data,shuchu){
                        $.ajax({
                            //几个参数需要注意一下
                            type: "POST",//方法类型
                            dataType: "json",//预期服务器返回的数据类型
                            url: url ,//url
                            data: data,
                            success: function (result) {
                                console.log(result);//打印服务端返回的数据(调试用)
                                if (result.success) {
                                    alert(shuchu+"成功");
                                    resultInfo();
                                    guanbiWindon();
                                    guanbishi();
                                    var message = $("#myForm").serialize()
                                    location.href="/roomType/toRoomType?pageNum=1&"+message;//刷新列表
                                }else{
                                    alert(shuchu+"失败");
                                }
                                ;
                            },
                            error : function() {
                                alert("异常！");
                            }
                        });
                    }

                    //点击添加或者修改
                    $(".btn_update_add").click(function () {
                        //confirm($(".form-horizontal"));
                        //在这里是修改
                        /*
                        *
                        * type_name=#{typeName},
                        price = #{price},
                        bed_num = #{bedNum},
                        room_num = #{roomNum},
                        usable=#{usable},
                        reserved=#{reserved},
                        check_in=#{checkIn},
                        status=#{status}
                        *
                        * */
                        var data = $(".form-horizontal").serialize()+"&roomNum=0&usable=0&status=0";
                        console.log(data);
                        var btnValue = $(".btn_update_add").html().trim();

                            if (u_typeName_check_boolean && u_price_check_boolean && u_bedNum_check_boolean == true){
                                //成功
                                // console.log("没有拦截到");


                                var url = "/roomType/updateRoomType";
                                var shuchu = "修改";
                                //获取按钮的值判断使用某个值
                                if (btnValue == "添加"){
                                    url = "/roomType/addRoomType";
                                    shuchu = "添加"
                                }
                                btn_update_add(url,data,shuchu);
                                if (shuchu=="修改"){
                                     guanbiWindon();
                                 }
                            } else{
                                alert("请填完所有信息")
                            }







                    })
                    //重置信息
                    function resultInfo() {
                        $(".form-horizontal")[0].reset();
                        guanbishi();


                    }

                    function guanbiWindon() {
                        $("#myModal").modal("hide");
                        resultInfo();
                    }

                    
                    /**
                     * 修改时绑定值
                     * @param
                     */
                function bangdingRoomType(btn){
                        roomTypeId = $(btn).parent().siblings().eq(0).html();//获得name
                        var roomType =  ajax_getRoomTypeInfoById(roomTypeId);
                        console.log(roomType);
                        //隐藏的内容
                        $("#oldTypeName").val(roomType.typeName);
                        $("#u_reserved").val(roomType.reserved);
                        $("#u_checkIn").val(roomType.checkIn);
                        $("#u_status").val(roomType.status);
                        //隐藏的结束
                        $("#u_typeName").val(roomType.typeName);
                        $("#u_bedNum").val(roomType.bedNum);
                        $("#u_price").val(roomType.price);
                        $("#u_roomtypeId").val(roomType.roomTypeId);


                }
                    $(".btn_updateRoomType").click(function () {
                        xiugai();
                        bangdingRoomType(this);
                        $(".btn_update_add").html("修改");
                        $("#myModalLabel").html("修改房间类型");
                    })
                    $(".btn_addRoomType").click(function () {
                        $(".btn_update_add").html("添加");
                        guanbishi();
                        $("#myModalLabel").html("添加房间类型");
                    })
                </script>

                <script type="text/javascript">
                    var u_typeName_check_boolean = false;
                    var u_price_check_boolean = false;
                    var u_bedNum_check_boolean = false;



                    function guanbishi() {
                        $("#u_typeName_check").removeClass("valid").removeClass("add_error").addClass("tip");
                        $("#u_price_check").removeClass("valid").removeClass("add_error").addClass("tip");
                        $("#u_bedNum_check").removeClass("valid").removeClass("add_error").addClass("tip");


                    }

                    //提交进行表单验证
                    function xiugai() {
                        $("#u_typeName_check").addClass("valid").removeClass("add_error").removeClass("tip");
                        $("#u_price_check").addClass("valid").removeClass("add_error").removeClass("tip");
                        $("#u_bedNum_check").addClass("valid").removeClass("add_error").removeClass("tip");
                        u_typeName_check_boolean = true;
                        u_price_check_boolean = true;
                        u_bedNum_check_boolean = true;

                    }
                    /**
                     *
                     */
                    $(function () {
                        $('#u_typeName').blur(function(){
                            var room_object = ajax_getRoomTypeInfoByName($("#u_typeName").val().trim());

                            var btnValue = $(".btn_update_add").html().trim();
                           //alert(btnValue);
                            console.log("----"+room_object);
                            $("#u_typeName_check").removeClass("valid").removeClass("add_error").addClass("tip");
                            if (  (btnValue == "修改" && $("#u_typeName").val().trim().length > 0)  || ($("#u_typeName").val().trim().length > 0  && room_object == null) ){
                                $('#u_typeName_check').addClass("valid");
                                u_typeName_check_boolean = true;
                            }else {
                                $('#u_typeName_check').addClass("add_error");
                                u_typeName_check_boolean = false;
                            }
                        });

                        $("#u_price").keyup(function() {
                            $("#u_price_check").removeClass("valid").removeClass("add_error").addClass("tip");
                            if ((/^[1-9]\d*$/).test(this.value)) {
                                $('#u_price_check').addClass("valid");
                                u_price_check_boolean = true;
                            }else {
                                $('#u_price_check').addClass("add_error");
                                u_price_check_boolean = false;
                            }
                        });
                        $("#u_bedNum").keyup(function() {
                            $("#u_bedNum_check").removeClass("valid").removeClass("add_error").addClass("tip");
                            if ((/^[1-9]\d*$/).test(this.value)) {
                                $('#u_bedNum_check').addClass("valid");
                                u_bedNum_check_boolean = true;
                            }else {
                                $('#u_bedNum_check').addClass("add_error");
                                u_bedNum_check_boolean = false;
                            }
                        });


                    })



                    function ajax_getRoomTypeInfoByName(roomTypeName){
                        var url = "/roomType/getRoomTypeByName";
                        var params = "roomTypeName="+roomTypeName;
                        var check_res;
                        $.ajax({
                            async:false,
                            url: url,
                            data:params,
                            type: "POST",
                            dataType: "json",
                            success: function(result){
                                check_res=result;
                            },error:function(){}
                        });
                        return check_res;
                    }

                    function ajax_getRoomTypeInfoById(roomTypeId){
                        var url = "/roomType/getRoomTypeById";
                        var params = "roomTypeId="+roomTypeId;
                        var check_res;
                        $.ajax({
                            async:false,
                            url: url,
                            data:params,
                            type: "POST",
                            dataType: "json",
                            success: function(result){
                                check_res=result;
                            },error:function(){}
                        });
                        return check_res;
                    }





                    /*打开模态框*/
                    function openModal() {
                        $("#myModal").modal("show");
                    }



                </script>
                
                <!--弹窗内容-->
                <div class="mask"></div>
                <div class="dialog">
                    <div class="title">
                        <img src="/images/room/roomTanC/close.png" alt="点击可以关闭" />系统提示

                        <!--<img src="../../../static/images/room/roomTanC/close.png" height="32" width="34"/>-->
                    </div>
                    <div class="content">
                        <!-- <img src="images/room/roomTanC/delete.png" alt=""/>
                        您确定要删除房间号为：<font color="red" style="font-weight: bold">2001号房间</font>的该条记录吗？-->
                    </div>
                    <div class="bottom">
                        <input id="Button2" type="button" value="确定" class="btn2"/>&nbsp;&nbsp;
                        <input id="Button3" type="button" value="取消" class="btn3"/>
                    </div>
                </div><!--弹窗结束-->
                <!-- 引用底部 -->
                <div th:replace="common/bottom::bottom"></div>
                <!--END FOOTER-->
                <!--END PAGE WRAPPER-->

        </div>
        <script>
            $(function () {
                $("#breadAppend").append('<i class="fa fa-home"></i><a href="#">房间管理</a> <i class="fa fa-angle-right"></i> <a href="#">房型管理</a>');
                $("#room").addClass("active");
            })
        </script>
      </div>
        <!-- 引用脚本 -->
        <div th:replace="common/script::script">

        </div>

    </body>
</html>
